<template>
  <div class="showBox wineInformation__list">
      <div class="head" v-if="pageType==='add'||pageType==='edit'">
        <el-form :model="addItemObj" label-position="right" label-width="90px" :rules="rules"  ref="ruleForm"  class="demo-ruleForm">
          <el-row style="margin: 0">
            <el-col :span="6">
              <el-form-item class="form-item" label="酒柜编号:" prop="graCode">
                <el-input  size="small" v-model="addItemObj.graCode" placeholder="请输入酒柜编号" :disabled="pageType==='edit'"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item class="form-item" label="所属门店:" prop="orgUuid">
                <el-select  size="small" v-model="addItemObj.orgUuid" placeholder="请选择门店" @change="handleOrgUuid">
                  <el-option v-for="item in storeOptions" :key="item.orgSeq" :label="item.orgName" :value="item.orgSeq"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item class="form-item" label="酒柜名称:"  prop="graName">
                <el-input  size="small" v-model="addItemObj.graName" placeholder="请输入酒柜名称"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row style="margin: 0">
            <el-col :span="6">
              <el-form-item class="form-item" label="酒柜摄像头:"  prop="deviceId">
                <el-select  size="small" :disabled="!addItemObj.orgUuid"  v-model="addItemObj.deviceId" placeholder="请选择酒柜摄像头" @change="handleDeviceId">
                  <el-option v-for="(item, index) in orgNameList" :key="index" :label="item.deviceName" :value="item.deviceUuid"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item class="form-item" label="拍摄区域:"  prop="takeArea">
                <el-input  size="small" disabled  v-model="addItemObj.takeArea" placeholder="拍摄区域"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="head1" v-if="pageType==='detail'">
          <p>编号：<span>{{addItemObj.graCode}}</span></p>
          <el-divider direction="vertical"></el-divider>
          <p>名称：<span>{{addItemObj.graName}}</span></p>
          <el-divider direction="vertical"></el-divider>
          <p>状态：<span>{{addItemObj.graCode}}</span></p>
          <el-divider direction="vertical"></el-divider>
          <p>所属门店：<span>{{addItemObj.deviceName}}</span></p>
          <el-divider direction="vertical"></el-divider>
          <p>关联摄像头：<span>{{addItemObj.orgName}}</span></p>
          <el-divider direction="vertical"></el-divider>
          <p>拍摄区域：<span>{{addItemObj.takeArea}}</span></p>
      </div>
      <div class="showImg">
        <p style="text-align: left; padding: 10px">陈列定妆照</p>
          <div class="img">
              <div class="demo">
                  <img :src="addItemObj.fileUrl" @error="handleImgUrlError">
              </div>
            <uploadFileByTour
              @handleAvatarSuccess="handleUplodSuccess"
            ></uploadFileByTour>
          </div>
      </div>
      <div class="buttonGroup">
          <el-button size="mini" round @click="$router.go(-1)">返回</el-button>
          <el-button size="small" type="primary" round @click="handleSubmit" :loading="loadings">提交</el-button>
      </div>
  </div>
</template>

<script>
  import uploadFileByTour from '@/components/uploadFileByTour'
  import { getDeviceInfoList, insertGradevinInfo, changeGradeInfo} from '@/api/smartShops'
  import { queryOrgChildById} from '@/api/deviceManage'
export default {
  components: {uploadFileByTour},
  props: {},
  data() {
    return {
      loadings: false,
       orgNameList: [],
        addItemObj: {
          orgUuid: '',
          deviceId: '',
          graCode:'',
          graName: '',
          fileUrl: '',
          fileKey: '',
          takeArea: '',
        },
        storeOptions: [],
        filePage: '',
        addData:{
        },
        pageType:'',
        editList: '',
    };
  },
  watch: {},
  methods: {
    //提交
    handleSubmit() {
      if (this.pageType==='detail') {
        this.handleGradevinInfo()
        return
      }
     this.$refs.ruleForm.validate(valid => {
       if (valid) {
          this.handleGradevinInfo()
       }
     });
    },
    async handleGradevinInfo() {
      this.loadings = true
      try {
        let data = this.pageType === 'add' ? await insertGradevinInfo (this.addItemObj) : await changeGradeInfo (this.addItemObj);
        data.code === 1 ?  this.$message.success(data.message) : this.$message.error(data.message)
        this.$router.go(-1)
      }
      catch (e) {
        this.loadings = false
      }
    },
    //处理酒柜摄像头
    handleDeviceId(val) {
      this.orgNameList.map(item => {
        if(item.deviceUuid === val) {
            this.addItemObj.deviceName = item.deviceName
            this.addItemObj.takeArea = item.takeArea
        }
      })
    },
    //处理门店
    handleOrgUuid(val) {
     this.addItemObj.deviceId = '';
     this.getDeviceInfoList(val);
      this.storeOptions.map(item => {
        if(item.orgSeq === val) {
          return this.addItemObj.orgName = item.orgName
        }
      })
    },
    //处理图片上传
    handleUplodSuccess(res, file) {
      this.addItemObj.fileUrl = res.result.objectUrl
      this.addItemObj.fileKey = res.result.objectKey
      this.filePage = res.result
    },
    //默认图片
    handleImgUrlError(e) {
      e.target.src = require('@/assets/images/img_icon/head.svg')
    },
    //获取酒柜摄像头
    async getDeviceInfoList(val) {
      let {records} = await getDeviceInfoList({
        orgSeq: this.pageType === 'add' ? val : this.$route.params.data.orgUuid
      })
      if(records) {
        this.orgNameList = records
      }
    },
    //获取门店
    async queryOrgChildById() {
      let {records} = await queryOrgChildById({
        orgSeq: this.pageType === 'add' ? this.$route.params.data : this.$route.params.data.orgUuid
      })
      if(records) {
        this.storeOptions = records
      }
    },
  },
  mounted() {
    let {data,type} = this.$route.params;
    this.pageType = type;
    this.pageType !== 'add'? this.addItemObj = data :''
    this.queryOrgChildById()
    this.pageType === 'edit' ? this.getDeviceInfoList() : ''
  },
  computed: {
    rules() {
      let ruleList = {};
      const ruleName = [
        {a:'graCode',b:'请输入酒柜编号'},
        {a:'orgUuid',b:'请选择门店'},
        {a:'graName',b:'请输入酒柜名称'},
        {a:'deviceId',b:'请选择酒柜摄像头'},
      ];
      ruleName.map(item => {
        this.$set(ruleList, `${item.a}`,
          [{required: true,  trigger: 'blur', message: `${item.b}`}, {
            required: true,
            trigger: 'change',
            message: `${item.b}`
          }],
        )
      })
      return ruleList;
    }
  },
};
</script>
<style lang="scss" scoped>
.showBox{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    .head{
        width: 100%;
        padding: 0 10px;
        border-bottom: 1px solid #DCDFE6;
        box-sizing: border-box;
        .form-item{
          margin-bottom: 10px;
        }
    }
  .head1{
      height: 50px;
      width: 100%;
      font-size: 14px;
      border-bottom: 1px solid #DCDFE6;
      line-height: 50px;

      p{
        display: inline-block;
      }
      span{
        font-weight: 500;
        color: red;
      }
      .el-divider{
        height: 60%;
      }
    }
    .showImg{
        width: 100%;
        box-sizing: border-box;
        padding: 10px;
        font-size: 13px;
        .img{
            width: 100%;
            height: 330px;
            display: flex;
            .demo{
                width: 300px;
                height: 300px;
                float: left;
                display: flex;
                justify-content: center;
                flex-direction: column;
                align-items: center;
                p{
                    text-align: center;
                    width: 300px;
                    height: 30px;
                    line-height: 30px;
                    font-size: 12px;
                }
                img,.up_box{
                    width: 300px;
                    height: 300px;
                }
            }

        }
    }

    .buttonGroup{
        width: 100%;
        text-align: center;
        height: 50px;
        line-height: 50px;

        .el-button{

        }
    }
}
</style>

<style lang="scss">
    .wineInformation__list{
      .el-form{
        .el-form-item{
          .el-form-item__label{
            line-height: 32px !important;
          }
        }
      }
        .avatar-uploader{
            .el-upload{
                  display: block;
                  width: 100%;
                  height: 100%;
                  line-height: 300px;
                  color: #8c939d;
                  i{
                      font-size: 40px;
                  }
            }
         }
    }
</style>
